<template>
  <div :style="{'background-color': bgColor}">
    <H1 :style="pStyle">User Profile</H1>
    <p :style="pStyle">Personal</p>
    <div class="demo-drawer-profile">
      <Row>
        <Col span="12">
          Full Name: {{ fullName }}
        </Col>
        <Col span="12">
          Account: {{ account }}
        </Col>
      </Row>
      <Row>
        <Col span="12">
          City: {{ city }}
        </Col>
        <Col span="12">
          Country: {{ country }}
        </Col>
      </Row>
      <Row>
        <Col span="12">
          Birthday: {{ birthday }}
        </Col>
        <Col span="12">
          Website: <a :href="website" target="_blank">{{ website }}</a>
        </Col>
      </Row>
      Message: {{ message }}
    </div>
    <Divider />
    <p :style="pStyle">Company</p>
    <div class="demo-drawer-profile">
      <Row>
        <Col span="12">
          Position: {{ position }}
        </Col>
        <Col span="12">
          Responsibilities: {{ responsibilities }}
        </Col>
      </Row>
      <Row>
        <Col span="12">
          Department: {{ department }}
        </Col>
      </Row>
      Skills: {{ skills }}
    </div>
    <Divider />
    <p :style="pStyle">Contacts</p>
    <div class="demo-drawer-profile">
      <Row>
        <Col span="12">
          Email: {{ email }}
        </Col>
        <Col span="12">
          Phone Number: {{ phone }}
        </Col>
      </Row>
      <Row>
        <Col span="12">
          GitHub: <a :href="github" target="_blank">{{ github }}</a>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  props: [
    'bgColor',
    'firstName',
    'lastName',
    'account',
    'city',
    'country',
    'birthday',
    'website',
    'github',
    'email',
    'phone',
    'skills',
    'position',
    'responsibilities',
    'department'
  ],
  data () {
    return {
      pStyle: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px'
      }
    }
  },
  computed: {
    fullName () {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

<style scoped>
  .demo-drawer-profile{
    font-size: 14px;
  }
  .demo-drawer-profile .ivu-col{
    margin-bottom: 12px;
  }
</style>
